<template>
	<CustomDialog
		:title="state.dialog.title"
		v-model:visible="state.dialog.isShowDialog"
		dialogWidth="900px"
		@close="closeDialog"
		@submit="submit"
		:dialogFooterBtn="true"
	>
		<div>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="积分记录" name="score">
					<UserScore ref="UserScoreRef"></UserScore>
				</el-tab-pane>
				<el-tab-pane label="订单记录" name="order">
					<UserOrder ref="UserOrderRef"></UserOrder>
				</el-tab-pane>
				<el-tab-pane label="优惠券记录" name="coupon">
					<UserCoupon ref="UserCouponRef"></UserCoupon>
				</el-tab-pane>
				<el-tab-pane label="分享记录" name="share">
					尽情期待后续实现.....
					<!--					<UserShare ref="UserShareRef"></UserShare>-->
				</el-tab-pane>
			</el-tabs>
		</div>
	</CustomDialog>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { TabsPaneContext } from 'element-plus';
import UserCoupon from './dynamic/user_coupon.vue';
import UserOrder from './dynamic/user_order.vue';
import UserScore from './dynamic/user_score.vue';
// import UserShare from './dynamic/user_share.vue';

const UserCouponRef = ref();
const UserOrderRef = ref();
const UserScoreRef = ref();
// const UserShareRef = ref();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '会员动态',
		submitTxt: '',
	},
});

const currentUserId = ref();
const activeName = ref<string>('score');

const handleClick = (tab: TabsPaneContext) => {
	if (activeName.value != tab.paneName) {
		activeName.value = tab.paneName;
		tab_content(tab.paneName);
	}
};

const tab_content = (tabName: string) => {
	switch (tabName) {
		case 'score':
			UserScoreRef.value.init(currentUserId.value);
			break;
		case 'order':
			UserOrderRef.value.init(currentUserId.value);
			break;
		case 'coupon':
			UserCouponRef.value.init(currentUserId.value);
			break;
	}
};

const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const openDialog = async (id: string) => {
	state.dialog.isShowDialog = true;
	currentUserId.value = id;
	await nextTick();
	tab_content(activeName.value);
};

const submit = () => {
	console.log('子组建。。。submit');
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
